<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摄影社区热门小镇</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
        .box{
            position: relative;
            width: 700px;
            display: table;
            border:  1px solid rgba(73, 73, 73);
            
        }

        h2{
            
            height: 50px;
            line-height: 50px;
            margin: 20px 0  10px 20px;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            font-size: 14px;
        }
       
        .box div{
            
            float: left;
        } 
        #pricture{
            position: absolute;
            top: 185px;
            left: 410px;
        }
        .box div .one-pricture{
            margin-left: 20px;
            margin-bottom: 30px;
            border: 1px solid rgba(133, 132, 132,0.2) ;
            border-radius: 5px;
            padding: 5px;
        }
        

        .box div .describe {
            margin-left: 10px;
            margin-right: 40px;
        }
        .box div .describe p:nth-child(1){
            color: rgb(101, 101, 241);
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: 14px;
        }
        .box div .describe p:nth-child(2){
            margin-top: 5px;
            color: rgb(133, 132, 132);
            font-family: "楷体";
            font-size: 12px;

        }
        .box div .describe p:nth-child(3){
            margin-top: 5px;
            margin-left: 0px;
            color: rgb(133, 132, 132);
            font-family: "楷体";
            font-size: 12px;

        }
    </style>
</head>
<body>

    <div class="box clearfix">
        <h2>摄影社区热门小镇</h2>
        <div>
            <div class="one-pricture">
                <img src="image/pic_01.jpg" alt="">
            
            </div>
            <div class="describe">
                <p >风景狙击手</p>
                <p>成员：80</p>
                <p>作品：276</p> 
            </div>   
        </div>
        <div>
            <div class="one-pricture">
                <img src="image/pic_02.jpg" alt="">
            </div>
            <div class="describe">
                <p>叙事感</p>
                <p>成员：235</p>
                <p>作品：116</p> 
            </div> 
        </div>
        <div >
            <div class="one-pricture">
                <img src="image/pic_03.jpg" alt="">
            </div>
            <div class="describe">
                <p>定焦视界</p>
                <p>成员：56</p>
                <p>作品：456</p> 
            </div> 
        </div>
        <div>
            <div class="one-pricture" >
                <img src="image/pic_04.jpg" alt="">
             </div>
            <div class="describe">
                <p>中国幅乐园</p>
                <p>成员：130</p>
                <p>作品：239</p> 
            </div> 
        </div>
       <div>
            <div class="one-pricture">
                <img src="image/pic_05.jpg" alt="">
            </div>
            <div class="describe">
                <p>《卡啪》先锋</p>
                <p>成员：78</p>
                <p>作品：125</p> 
            </div> 
        </div>
        <div id="pricture">
            <div class="one-pricture">
                <img src="image/pic_06.jpg" alt="">
            </div>
            <div class="describe">
                <p>植物的无声世界</p>
                <p>成员：236</p>
                <p>作品：1258</p> 
            </div> 
        </div>
    </div>
</body>
</html>